<template>
	<view>
		<view>
			<view class="flex font-lg-g">
				<view class="row">
					<view class="block flex align-center justify-center bg-grey rounded-radius position-relative chai-num"
						style="margin-top: 220rpx;"></view>
				</view>
				<view class="row">
					<view class="block flex align-center justify-center position-relative big-num">11</view>
				</view>
				<view class="row">
					<view class="block flex align-center justify-center">-</view>
					<view class="block flex align-center justify-center position-relative ten"
						style="margin-top: 108rpx;">10</view>
				</view>
				<view class="row">
					<view class="block flex align-center justify-center position-relative small-num">6</view>
					<view class="block flex align-center justify-center bg-grey rounded-radius position-relative sub-num"
						style="margin-top: 324rpx;margin-left:-54rpx">10</view>
				</view>
				<view class="row">
					<view class="block flex align-center justify-center">=</view>
				</view>
				<view class="row">
					<view class="block flex align-center justify-center bg-grey rounded-radius"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.row {
		width: 112rpx;
		flex-shrink: 0;

		.block {
			width: 112rpx;
			height: 112rpx;
		}

		.big-num {
			&::after {
				content: ' ';
				position: absolute;
				bottom: -120rpx;
				left: 0;
				width: 2px;
				height: 120rpx;
				background: red;
				transform: rotate(45deg);
			}

			&::before {
				content: ' ';
				position: absolute;
				bottom: -120rpx;
				right: 0;
				width: 2px;
				height: 120rpx;
				background: red;
				transform: rotate(-45deg);
			}
		}

		.ten {
			&::after {
				content: ' ';
				position: absolute;
				bottom: -102rpx;
				left: 50%;
				width: 2px;
				height: 110rpx;
				background: red;
			}
			&::before {
				content: ' ';
				position: absolute;
				bottom: -102rpx;
				left: 50%;
				width: 112rpx;
				height: 2px;
				background: red;
			}
		}

		.small-num {
			&::after {
				content: ' ';
				position: absolute;
				bottom: -322rpx;
				left: 50%;
				width: 2px;
				height: 322rpx;
				background: red;
			}
			&::before {
				content: '-';
				font-weight: bold;
				color: red;
				position: absolute;
				font-size: 80rpx;
				bottom: -322rpx;
				left: -50%;
				width: 117rpx;
				text-align: center;
			}
		}
		.chai-num{
			&::after {
				content: ' ';
				position: absolute;
				bottom: -322rpx;
				left: 50%;
				width: 2px;
				height: 322rpx;
				background: red;
			}
			&::before {
				content: ' ';
				position: absolute;
				bottom: -322rpx;
				left: 50%;
				width: 300rpx;
				height: 2px;
				background: red;
			}
		}
		.sub-num{
			&::after {
				content: ' ';
				position: absolute;
				bottom: -322rpx;
				left: 50%;
				width: 2px;
				height: 122rpx;
				background: red;
			}
		}
	}
</style>